/* 公共变量 */
page, view, text, image, button { box-sizing: border-box; }

body{
	--primary:#007bff;/* 蓝(原色)--主要的*/
	--secondary: #6c757d;/* 灰蓝--次要的*/
	--success: #28a745;/* 绿色--成功的 */
	--danger: #dc3545;/* 深红--危险 */
	--warning: #ffc107;/* 黄(原色)--警告*/
	--info: #17a2b8;/* 绿松石色--信息*/
	--light: #f8f9fa;/* 亮白色*/
	--dark: #343a40;/* 暗黑*/
	--muted: #6c757d;/* 灰黑*/
	--white: #fff;/* 白色*/
	--lightmuted:#B2B2B2;/* 浅灰色*/
    --bordercolor:#f8f8f8;/* 默认是取 #dee2e6,现在取背景颜色的值 */
    --backgroundcolor:#f6f7f8;/* 默认是背景颜色 */
}
	/* 页面主色 */
    /* 主题颜色的应用:在vue页面上引入<view :style="{ '--themescolor': themes.color }">值,只要--themescolor的名字对应上,该themes.color值会传到该公共css里 */
	/* --themescolor:var(--themescolor);  */
    
 /* 防止图片闪一下 */
 image{will-change: transform}
/* 指定页面安全距离 */

page {
    --safe-area-inset-top: 0px;  
    --safe-area-inset-right: 0px;  
    --safe-area-inset-bottom: 0px;  
    --safe-area-inset-left: 0px;  
	
}  
 
@supports (top: constant(safe-area-inset-top)) {
    page {  
        --safe-area-inset-top: constant(safe-area-inset-top);  
        --safe-area-inset-right: constant(safe-area-inset-right);  
        --safe-area-inset-bottom: constant(safe-area-inset-bottom);  
        --safe-area-inset-left: constant(safe-area-inset-left);  
    }  

}  

@supports (top: env(safe-area-inset-top)) {  
    page {  
        --safe-area-inset-top: env(safe-area-inset-top);  
        --safe-area-inset-right: env(safe-area-inset-right);  
        --safe-area-inset-bottom: env(safe-area-inset-bottom);  
        --safe-area-inset-left: env(safe-area-inset-left);  
    }  
}
/* 用法:<view class="det-foot" style="border-bottom: var(--safe-area-inset-bottom) solid #FFFFFF;">
或者:.det-foot { height: calc(50px + var(--safe-area-inset-bottom)); } 
    .detail { padding-bottom: calc(60px + var(--safe-area-inset-bottom)); }*/
.safearea-bb{border-bottom: var(--safe-area-inset-bottom) solid transparent;}
.safearea-bb-white{border-bottom: var(--safe-area-inset-bottom) solid #FFFFFF;}
.safearea-bb-theme{border-bottom: var(--safe-area-inset-bottom) solid var(--themescolor);}
.safearea-bb-bg{border-bottom: var(--safe-area-inset-bottom) solid var(--backgroundcolor);}
.safearea-bt{border-top: var(--safe-area-inset-top) solid transparent;}
.safearea-bt-white{border-top: var(--safe-area-inset-top) solid #FFFFFF;}
.safearea-bt-theme{border-top: var(--safe-area-inset-top) solid var(--themescolor);}
.safearea-bt-bg{border-top: var(--safe-area-inset-top) solid var(--backgroundcolor);}

.clearfix { zoom: 1;}
.clearfix:after{ content: " ";  display: table;  clear: both; }

/* 阴影(备注：只能用px为单位，用rpx无效) */
.shadow-sm {box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)}/* 浅色投影 */
.shadow {box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)}/* 基础投影 */
.shadow-lg {box-shadow: 0px 8px 24px rgba(114, 130, 138, 0.8)}/* 深色投影 */
/* 定位 */
.position-static{ position: static; }
.position-absolute{ position: absolute; }
.position-fixed{ position: fixed; }
.position-relative{ position: relative; }
.position-sticky{ position: sticky; }
.left-0{ left: 0; }
.left-100{ left: 100%; }
.top-0{ top: 0; }
.top-100{ top: 100%; }
.bottom-0{ bottom: 0; }
.bottom-100{ bottom: 100% }
.bottom-100r{ bottom: 100rpx }
.bottom-160r{ bottom: 160rpx }
.right-0{ right: 0; }
.right-20r{ right: 20rpx; }
.right-40r{ right: 40rpx; }
.right-100{ right: 100%; }
/* 宽高 */
.w-100{ width: 100%;}
.w-95{ width: 95%;}
.w-90{ width: 90%;}
.w-80{ width: 80%;}
.w-50{ width: 50%;}
.w-33{ width: 33.33333333%;}
.w-25{ width: 25%;}
.w-18{ width: 18%;}
.h-100{ height: 100%;}
.h-75{ height: 75%; }
.h-50{ height: 50%; }
.h-25{ height: 25%; }
/* 新增 */
.w-auto{ width: auto; }
.w-0{ width: 0; }
.w-20r{ width: 20rpx;}
.w-30r{ width: 30rpx;}
.w-40r{ width: 40rpx;}
.w-50r{ width: 50rpx;}
.w-60r{ width: 60rpx;}
.w-70r{ width: 70rpx;}
.w-80r{ width: 80rpx;}
.w-88r{ width: 88rpx;}
.w-100r{ width: 100rpx;}
.w-110r{ width: 110rpx;}
.w-120r{ width: 120rpx;}
.w-130r{ width: 130rpx;}
.w-136r{ width: 136rpx;}
.w-140r{ width: 140rpx;}
.w-150r{ width: 150rpx;}
.w-160r{ width: 160rpx;}
.w-180r{ width: 180rpx;}
.w-200r{ width: 200rpx;}
.w-210r{ width: 210rpx;}
.w-220r{ width: 220rpx;}
.w-240r{ width: 240rpx;}
.w-290r{ width: 290rpx;}
.w-300r{ width: 300rpx;}
.w-350r{ width: 350rpx;}
.w-400r{ width: 400rpx;}

.h-100vh{ height: 100vh;}
.h-60vh{ height: 60vh;}
.h-50vh{ height: 50vh;}
.h-33vh{ height: 33vh;}
.h-25vh{ height: 25vh;}
.w-100vw{ width: 100vw;}
.w-50vw{ width: 50vw;}
.w-33vw{ width: 33vw;}
.w-25vw{ width: 25vw;}

.h-auto{ height: auto; }
.h-0{ height: 0; }
.h-20r{height: 20rpx;}
.h-30r{height: 30rpx;}
.h-40r{ height: 40rpx;}
.h-44r{ height: 44rpx;}
.h-50r{ height: 50rpx;}
.h-56r{height: 56rpx;}/* 搜索框的标准高度 */
.h-60r{height: 60rpx;}
.h-70r{ height: 70rpx;}
.h-80r{ height: 80rpx;}
.h-88r{ height: 88rpx;}
.h-100r{ height: 100rpx;}
.h-120r{ height: 120rpx;}
.h-130r{ height: 130rpx;}
.h-140r{ height: 140rpx;}
.h-150r{ height: 150rpx;}
.h-160r{ height: 160rpx;}
.h-170r{ height: 170rpx;}
.h-180r{ height: 180rpx;}
.h-200r{ height: 200rpx;}
.h-240r{ height: 240rpx;}
.h-220r{ height: 220rpx;}
.h-300r{ height: 300rpx;}
.h-350r{ height: 350rpx;}
.h-400r{ height: 400rpx;}
.h-625r{ height: 625rpx; }
.h-1250r{ height: 1250rpx;}

/* 字体 */
.font{ font-size: 25rpx; }
.font-sm{ font-size: 20rpx; }
.font-md{ font-size: 30rpx; }
.font-lg{ font-size: 40rpx; }
.font-big{ font-size: 60rpx; }
.font-weight{ font-weight: bold!important; }
.font-weight-100{ font-weight: 100!important; }
.font-weight-400{ font-weight: 400!important; }
.font-weight-500{ font-weight: 500!important; }
.font-weight-600{ font-weight: 600!important; }
/* 以下为新增的 */
.font-0{ font-size: 0; }/* view下的image子元素，image不设高度的话，会不占满父级元素，这时加上font-size: 0;就能把空出的2px空白给填上 */
.font-80{ font-size: 80rpx; }
.font-70{ font-size: 70rpx; }
.font-60{ font-size: 60rpx; }
.font-56{ font-size: 56rpx; }
.font-48{ font-size: 48rpx; }
.font-44{ font-size: 44rpx; }
.font-40{ font-size: 40rpx !important; }
.font-36{ font-size: 36rpx; }
.font-32{ font-size: 32rpx; }
.font-30{ font-size: 30rpx; }
.font-28{ font-size: 28rpx; }
.font-26{ font-size: 26rpx; }
.font-24{ font-size: 24rpx; }
.font-20{ font-size: 20rpx; }
.word-breakall{ word-break: break-all;}
.font-arial{font-family:arial;}/* 数字专用，数字用这个字体会比默认的好看 */
.font-Lantinghei{font-family:Lantinghei SC;}/* 栏亭黑简体-标题专用 */

/* 字距 */
.letter-sp2{letter-spacing:2rpx}
.letter-sp4{letter-spacing:4rpx}
.letter-sp10{letter-spacing:10rpx}

.line-h0{ line-height: 0!important; }
.line-h{ line-height: 1!important; }
.line-h-sm{ line-height: 1.2!important; }
.line-h-md{ line-height: 1.5!important; }
.line-h-lg{ line-height: 2!important; }
.line-h-big{ line-height: 3!important; }

.line-through{ text-decoration: line-through; }/* 定义穿过文本下的一条线。 */
.overline{ text-decoration: overline; }/* 定义文本上的一条线。 */
.underline{ text-decoration: underline; }/* 定义文本下的一条线。 */
.blink{ text-decoration: blink; }/* 定义闪烁的文本。 */

.text-justify { text-align: justify; } /*文本两端对其*/
.text-center{ text-align: center; }
.text-left{ text-align: left; }
.text-right{ text-align: right; }

/* scroll-view */
.scroll-row{ width: 100%;white-space: nowrap; }
/* 新增 */
.text-nowrap{ white-space: nowrap;word-wrap:normal; }/* 强制不换行 */
.text-wrap{ white-space: normal; word-wrap:break-word; word-break:break-all; }/* 强制换行(且所有文字是breakall),但遇到一个换行符才会换行(不保留空格) */
.text-pre-line{ white-space: pre-line;word-wrap:break-word; word-break:break-all;}/*自动换行(且所有文字是breakall),遇到一个换行符才会换行 (保留空格，但多个空格合并成一个)*/
.text-pre-wrap{ white-space: pre-wrap;word-wrap:break-word; word-break:break-all;}/*自动换行(且所有文字是breakall),遇到一个换行符才会换行(保留全部空格)  */

.border-box{box-sizing: border-box!important;}
.content-box{box-sizing: content-box!important;}
.row { box-sizing: border-box!important; display: flex!important; flex-direction: row; flex-wrap: wrap;}/* 横向flex但会换行 */
[class*='col-'],[class*='span-'],[class*='span24-'] { min-height: 1px;box-sizing: border-box!important;}
/* 栅栏一 */
.col-1{ width: 62.5rpx; } 
.col-2{ width: 125rpx; } 
.col-3{ width: 187.5rpx; } 
.col-4{ width: 250rpx;} 
.col-5{ width: 312.5rpx; } 
.col-6{ width: 375rpx; }
.col-7{ width: 437.5rpx; }
.col-8{ width: 500rpx; }
.col-9{ width: 562.5rpx; }
.col-10{ width: 625rpx; }
.col-11{ width: 687.5rpx; }
.col-12{ width: 750rpx; }
/* 栅栏二 */
.span-1{ width: 5%; } 
.span-2{ width: 10%; } 
.span-3{ width: 15%; } 
.span-4{ width: 20%;} 
.span-5{ width: 25%; } 
.span-6{ width: 30%; }
.span-7{ width: 35%; }
.span-8{ width: 40%; }
.span-9{ width: 45%; }
.span-10{ width: 50%; }
.span-11{ width: 55%; }
.span-12{ width: 60%; }
.span-13{ width: 65%; }
.span-14{ width: 70%; }
.span-15{ width: 75%; }
.span-16{ width: 80%; }
.span-17{ width: 85%; }
.span-18{ width: 90%; }
.span-19{ width: 95%; }
.span-20{ width: 100%; }
/* 栅栏三 */
.span24-1{ width: 4.17%; } 
.span24-2{ width: 8.33%; } 
.span24-3{ width: 12.5%; } 
.span24-4{ width: 16.67%;} 
.span24-5{ width: 20.83%; } 
.span24-6{ width: 25%; }
.span24-7{ width: 29.17%; }
.span24-8{ width: 33.33%; }
.span24-9{ width: 37.5%; }
.span24-10{ width: 41.67%; }
.span24-11{ width: 45.83%; }
.span24-12{ width: 50%; }
.span24-13{ width: 54.17%; }
.span24-14{ width: 58.33%; }
.span24-15{ width: 62.5%; }
.span24-16{ width: 66.67%; }
.span24-17{ width: 70.83%; }
.span24-18{ width: 75%; }
.span24-19{ width: 79.17%; }
.span24-20{ width: 83.33%; }
.span24-21{ width: 87.5%; }
.span24-22{ width: 91.67%; }
.span24-23{ width: 95.83%; }
.span24-24{ width: 100%; }

/* button按钮 */
 [class*='but-']{ box-sizing: border-box;display: flex;align-items: center;justify-content: center; }
.but-pe-none{background: rgba(0,0,0,0.3) !important;color: #fff!important;border: 0!important;pointer-events: none !important; }/* 置灰的按钮(不可点击的按钮)，这个class写在view层，按钮文字写在view层包住的text层里 */
.but-pe-none-rgb02{background: rgba(0,0,0,0.2) !important;color: #fff!important;border: 0!important; pointer-events: none !important; }/* 置灰的按钮(不可点击的按钮)，这个class写在view层，按钮文字写在view层包住的text层里 */
.but-main{background: var(--themescolor) !important;color: #fff!important;border: 0!important; }/* 主题颜色的按钮(可点击的按钮)，这个class写在view层，按钮文字写在view层包住的text层里 */
.but-main-rgb02{background: var(--themesrgba02) !important;color: var(--themescolor)!important; border:0!important; }/* 主题颜色rgba02的按钮(可点击的按钮)，这个class写在view层，按钮文字写在view层包住的text层里 */
.pointer-none{pointer-events: none;}/* 禁止点击 */
.pointer-auto{pointer-events: auto;}/* 父元素pointer-none后子元素可以用 pointer-auto这样只能点击子元素*/
/* flex布局 */
.d-flex{ display: flex; }
.d-inline-flex{ display: inline-flex; }
.d-grid{ display: grid; }
.d-block{ display: block; }
.d-inline-block{ display: inline-block; }
.d-contents{ display: contents; } /* 这个类似于inline-block，但contents 使 div 不产生任何框 ，因此不会渲染其背景 边框 和 内边距 ，但颜色 / 字体等继承的属性还是会对其子元素产生效果 */
.d-none{ display: none; } 

.flex-1{ flex: 1; }/* flex属性的默认值为：0 1 auto（不放大会缩小;  flex为none：0 0 auto（不放大也不缩小）;    flex为auto：1 1 auto（放大且缩小） */
.flex-2{ flex: 2; }
.flex-3{ flex: 3; }
.flex-4{ flex: 4; }
.flex-5{ flex: 5; }
.flex-9{ flex: 9; }
.flex-column{ flex-direction: column; }
.flex-row{ flex-direction: row; }
.flex-wrap{ flex-wrap: wrap; }
.flex-nowrap{ flex-wrap: nowrap; }
.flex-shrink{flex-shrink: 0;}/* 默认为1，即如果空间不足，该项目将缩小，缩小的比例相同；flex-shrink为0：空间不足时，该项目不会缩小； */
.flex-grow-1{flex-grow: 1;}/* 默认为0，即 即使存在剩余空间，也不会放大；所有项目的flex-grow为1：等分剩余空间（自动放大占位）； */

/* 主轴 */
.j-start{ justify-content: flex-start; }
.j-center{ justify-content: center; }
.j-end{ justify-content: flex-end; }
.j-sb{ justify-content: space-between; }
.j-sa{ justify-content: space-around; }
.j-self-center{ justify-self: center; }
.j-self-start{ justify-self: flex-start; }
.j-self-auto{ justify-self: auto; }
.j-self-end{ justify-self: flex-end; }
.j-self-stretch{ justify-self:stretch; }
.j-self-baseline{ justify-self:baseline; }
/* 交叉轴 */
.a-center{ align-items:center; }
.a-start{ align-items: flex-start; }
.a-end{ align-items:flex-end; }
.a-baseline{ align-items: baseline;}
.a-stretch{ align-items: stretch; }
.a-self-center{ align-self: center; }
.a-self-start{ align-self: flex-start; }
.a-self-auto{ align-self: auto; }
.a-self-end{ align-self: flex-end; }
.a-self-stretch{ align-self:stretch; }
.a-self-baseline{ align-self:baseline; }

/* 以下为新增 */
/* 垂直对齐方式(可用于任何布局) */
.v-baseline{ vertical-align: baseline; }/* 默认。元素放置在父元素的基线上 */
.v-sub{ vertical-align: sub; }/*垂直对齐文本的下标 */
.v-super{ vertical-align: super; }/* 	垂直对齐文本的上标 */
.v-top{ vertical-align: top; }/* 把元素的顶端与行中最高元素的顶端对齐 */
.v-text-top{ vertical-align: text-top; }/* 把元素的顶端与父元素字体的顶端对齐 */
.v-middle{ vertical-align: middle; }/* 把此元素放置在父元素的中部 */
.v-baseline-middle{ vertical-align: -webkit-baseline-middle; }/* 把此元素放置在父元素的中部 */
.v-bottom{ vertical-align: bottom; }/* 把元素的顶端与行中最低的元素的顶端对齐 */
.v-text-bottom{ vertical-align: text-bottom; }/* 把元素的底端与父元素字体的底端对齐 */

/* flex横向 */
.flex-auto{ flex: auto; }/* 即是:flex:1 1 auto;[第一个是放大值(默认为0，即如果存在剩余空间，也不放大),第二个是缩小值(默认为1，如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小),第三个固定值(跟width或height属性一样的值（比如350px），则项目将占据固定空间)] */
.flex-none{ flex: none; }/* 即是:flex:0 0 auto; */
.flex-center{ box-sizing: border-box;display: flex;align-items: center;justify-content: center;}/* X轴(主轴)方向-所有元素居中(包括横向的和垂直方向的) */
.flex-start{ box-sizing: border-box;display: flex;align-items: center;justify-content: flex-start;}/* X轴(主轴)方向-所有元素居中(子元素-横向靠左对齐) */
.flex-end{ box-sizing: border-box; display: flex; align-items: center; justify-content: flex-end;}/* X轴(主轴)方向-所有元素垂直方向居中(子元素-横向靠右对齐)*/
.flex-between{ box-sizing: border-box; display: flex; align-items: center; justify-content: space-between;}/* X轴(主轴)方向-所有元素垂直方向居中(两端对齐,子元素之间的间隔都相等。只有一个子元素时是左对齐)*/
.flex-around{ box-sizing: border-box; display: flex; align-items: center; justify-content: space-around;}/* X轴(主轴)方向-所有元素垂直方向居中(每个子元素两侧的间隔相等。所以，子元素之间的间隔比子元素与边框的间隔大一倍。只有一个子元素时是居中,)*/
/* flex竖向flex-direction: column; */
[class*='flex-col-']{ box-sizing: border-box; display: flex; flex-direction: column;}
.flex-col-center{ justify-content: center;align-items: center; }/* Y轴(主轴)方向-所有元素居中(包括横向的和垂直方向的都居中)*/
.flex-col-start{ justify-content: center;align-items: flex-start;}/* Y轴(主轴)方向-所有元素垂直方向居中(子元素-横向靠左对齐)*/
.flex-col-end{ justify-content: center;align-items: flex-end;}/* Y轴(主轴)方向-所有元素垂直方向居中(子元素-横向靠左对齐)*/
.flex-col-baseline{ justify-content: center;align-items: baseline;}/* Y轴(主轴)方向-所有元素垂直方向居中(X轴-项目的第一行文字的基线对齐)*/
.flex-col-stretch{ justify-content: center;align-items: stretch;}/* Y轴(主轴)方向-所有元素垂直方向居中(X轴-如果项目未设置高度或设为auto，将占满整个容器的高度)*/

.flex-col-between{ justify-content: space-between;align-items: flex-start;}/* Y轴(主轴)方向-所有元素垂直方向两端对齐(子元素-横向靠左对齐)*/
.flex-col-around{ justify-content: space-around;align-items: flex-start;}/* Y轴(主轴)方向-所有元素每个子元素上下之间的间隔相等(子元素-横向靠左对齐)*/

/* grid网格布局 */
.grid-column1{ display: grid;grid-template-columns: repeat(1, 1fr);}/* grid网格布局,1列,1*/
.grid-column2{ display: grid;grid-template-columns: repeat(2, 1fr);}/* grid网格布局,2列,1:1*/
.grid-column3{ display: grid;grid-template-columns: repeat(3, 1fr);}/* grid网格布局,3列,1:1:1*/
.grid-column4{ display: grid;grid-template-columns: repeat(4, 1fr);}/* grid网格布局,4列,1:1:1:1*/
.grid-column5{ display: grid;grid-template-columns: repeat(5, 1fr);}/* grid网格布局,5列,1:1:1:1:1*/
.grid-column6{ display: grid;grid-template-columns: repeat(6, 1fr);}/* grid网格布局,6列,1:1:1:1:1:1*/

.grid-c-10{grid-column-gap: 10rpx;}/*每列之间的间距 */
.grid-c-20{grid-column-gap: 20rpx;}/*每列之间的间距 */
.grid-r-10{grid-row-gap: 10rpx;}/*每行之间的间距  */
.grid-r-20{grid-row-gap: 20rpx;}/*每行之间的间距  */
.grid-rc-20{grid-column-gap: 20rpx;grid-row-gap: 20rpx;}/*每行及每列之间的间距  */
.grid-rc-40{grid-column-gap: 40rpx;grid-row-gap: 40rpx;}/*每行及每列之间的间距  */
.grid-gap10p{grid-gap: 10px;}/*每行及每列之间的间距  */
.grid-gap20{grid-gap: 20rpx;}/*每行及每列之间的间距  */

.grid-c-span2{grid-column: span 2;}/*grid里面的元素 占据两列的位置 */
.grid-c-span3{grid-column: span 3;}/*grid里面的元素 占据三列的位置 */
.grid-c-span4{grid-column: span 4;}/*grid里面的元素 占据四列的位置 */
.grid-c-span5{grid-column: span 5;}/*grid里面的元素 占据五列的位置 */
.grid-r-span2{grid-row: span 2;}/*grid里面的元素 占据两行的位置 */
.grid-r-span3{grid-row: span 3;}/*grid里面的元素 占据两行的位置 */
.grid-r-span4{grid-row: span 4;}/*grid里面的元素 占据两行的位置 */
.grid-r-span5{grid-row: span 5;}/*grid里面的元素 占据两行的位置 */

/* 浮动 与flex不兼容*/
.float-left{float: left;}
.float-right{float: right;}

/* Border，注意：定义的border线后，还要另外定义border线的颜色 */
.border{  border : 2rpx solid var(--bordercolor);}/* 四边框有波打线-2rpx宽/--bordercolor色 */
.border-top{ border-top : 2rpx solid var(--bordercolor); }/* 上边框波打线-2rpx宽、--bordercolor色 */
.border-right{ border-right : 2rpx solid var(--bordercolor);}/* 右边框波打线-2rpx宽、--bordercolor色 */
.border-bottom{ border-bottom : 2rpx solid var(--bordercolor);}/* 下边框波打线-2rpx宽、--bordercolor色 */
.border-left{ border-left : 2rpx solid var(--bordercolor);}/* 左边框波打线-2rpx宽、--bordercolor色 */
.border-none{ border: none; } 

/* border线的颜色，注意：这个要跟上边的.border配合一起用 */
.border-primary{ border-color: var(--primary)!important }
.border-secondary{ border-color:var(--secondary)!important }
.border-success{ border-color: var(--success)!important }
.border-danger{ border-color: var(--danger)!important }
.border-warning{ border-color:var(--warning)!important }
.border-info{ border-color: var(--info)!important }
.border-light{ border-color: var(--light)!important }
.border-dark{ border-color: var(--dark)!important }
.border-white{ border-color: var(--white)!important }
/* 新增 */
.border-transparent { border-color: transparent!important } 
.border-main{  border-color: var(--themescolor)!important}
.border-bg{border-color: var(--backgroundcolor)!important}
.border-ccc{ border-color: #CCCCCC!important }
.border-999{ border-color: #999!important }
.border-666{ border-color: #666!important }
.border-eee{ border-color: #eeeeee!important }
.border-e4 { border-color : #e4e4e4!important }
.border-f1{border-color: #F1F1F1!important;}
.border-f8{border-color: #F8F8F8!important;}

/* :after伪装成border线(x：横向，bg：背景色，top：靠上定位,20r：距左右两边20rpx) */
.border-bg-top-x20r{ width: 100%; position :relative;} .border-bg-top-x20r:after{ content: ''; position :absolute; top :0rpx; left :20rpx; right :20rpx; height: 2rpx; background :var(--backgroundcolor);}
.border-e4-top-x20r{ width: 100%; position :relative;} .border-e4-top-x20r:after{ content: ''; position :absolute; top :0rpx; left :20rpx; right :20rpx; height: 2rpx; background :#e4e4e4;}
.border-f1-top-x20r{ width: 100%; position :relative;} .border-f1-top-x20r:after{ content: ''; position :absolute; top :0rpx; left :20rpx; right :20rpx; height: 2rpx; background :#f1f1f1;}
.border-f1-bottom-x20r{ width: 100%; position :relative;} .border-f1-bottom-x20r:after{ content: ''; position :absolute; bottom :0rpx; left :20rpx; right :20rpx; height: 2rpx; background :#f1f1f1;}
.border-f8-bottom-x20r{ width: 100%; position :relative;} .border-f8-bottom-x20r:after{ content: ''; position :absolute; bottom :0rpx; left :20rpx; right :20rpx; height: 2rpx; background :#f8f8f8;}
/* :after伪装成border线(y：竖向，bg：背景色，left：靠左定位，30r：距上下两边30rpx) */
.border-bg-left-y30r{ position :relative;} .border-bg-left-y30r:after{ content: ''; position :absolute; bottom :30rpx; top :30rpx; left :0rpx; width: 2rpx; background :var(--backgroundcolor); }
.border-e4-left-y20r{ position :relative;} .border-e4-left-y20r:after{ content: ''; position :absolute; bottom :20rpx; top :20rpx; left :0rpx; width: 2rpx; background :#e4e4e4; }

.border-dotted{ border: 2rpx dotted var(--bordercolor); }/* dotted:点状 */
/* 代替border:dotted的点状线(X轴方向)(可调整间距,优惠券专用) 用法：<view class="dotted-line-20r position-absolute w-100" style="bottom: -10rpx;"></view>*/
.dotted-line-x-20r{ height: 20rpx; background-image: radial-gradient(circle closest-side,#ffffff 20rpx,transparent 20rpx); background-size: 30rpx 100%; }
.dotted-line-y-20r{ width: 20rpx; background-image: radial-gradient(circle closest-side,#ffffff 20rpx,transparent 20rpx); background-size: 100% 30rpx; }/* 代替border:dotted的点状线(Y轴方向)*/
.dotted-line-y-15r{ width: 15rpx; background-image: radial-gradient(circle closest-side,#ffffff 15rpx,transparent 15rpx); background-size: 100% 20rpx; }/* 代替border:dotted的点状线(Y轴方向)*/

.border-dashed{ border: 2rpx dashed var(--bordercolor); }/* dashed:虚线 */
.border-bottom-dashed-ddd{ border-bottom: 2rpx dashed  #ddd; }/* dashed:虚线 */

/* 新增 */
.border-top-20bg{ border-top: 20rpx solid var(--backgroundcolor); }/* 上边框波打线-20rpx宽、背景色 */
.border-bottom-20bg{ border-bottom: 20rpx solid var(--backgroundcolor);}/* 下边框波打线-20rpx宽、背景色 */

.border-0{ border-width: 0; }
.border-top-0{ border-top-width: 0; }
.border-right-0{ border-right-width: 0; }
.border-bottom-0{ border-bottom-width: 0; }
.border-left-0{ border-left-width: 0; }

/* 注意:
	一、IOS border-radius不生效时，要配合下面的.translate3d0一起用
	二、以前是在.rounded里加入transform:translate3d(0,0,0)的，但后来发现当它作为父元素时，会导致子元素的position:fiexd失效，
	   并且rounded-circle和iconfont一起用时，某种情况下会吃掉iconfont左边的1px导致整个圆左边缺少一点点
*/
.rounded{ border-radius: 5rpx; }
.rounded-circle{ border-radius:100%; }
.rounded-0{ border-radius:0; }
/* 新增 */

.rounded-5{ border-radius: 5rpx; }
.rounded-8{ border-radius: 8rpx; }
.rounded-10{ border-radius: 10rpx; }
.rounded-12{ border-radius: 12rpx; }
.rounded-16{ border-radius: 16rpx; }
.rounded-20{ border-radius: 20rpx; }
.rounded-22{ border-radius: 22rpx; }
.rounded-24{ border-radius: 24rpx; }
.rounded-30{ border-radius: 30rpx; }
.rounded-34{ border-radius: 34rpx; }
.rounded-40{ border-radius: 40rpx; }
.rounded-50{ border-radius: 50rpx; }
.rounded-100{ border-radius: 100rpx; }

/* color */
.text-primary{ color:var(--primary)!important; }
.text-secondary{ color:var(--secondary)!important; }
.text-success{ color:var(--success)!important; }
.text-danger{ color: var(--danger)!important; }
.text-warning{ color:var(--warning)!important; }
.text-info{ color: var(--info)!important; }
.text-light{ color: var(--light)!important; }
.text-dark{ color: var(--dark)!important; }
.text-muted{ color: var(--muted)!important; }
.text-light-muted{ color: var(--lightmuted)!important; }
.text-white{ color: var(--white)!important; }
/* 新增的灰色 */
.text-333{ color: #333333!important; }
.text-444{ color: #444444!important; }
.text-555{ color: #555555!important; }
.text-666{ color: #666666!important; }
.text-999{ color: #999999!important; }
.text-bbb{ color: #BBBBBB!important; }
.text-ccc{ color: #CCCCCC!important; }
.text-ddd{ color: #DDDDDD!important; }
.text-eee{ color: #EEEEEE!important; }
.text-fff{ color: #FFFFFF!important; }
.text-main{ color: var(--themescolor)!important; }


.bg-primary{ background-color:var(--primary)!important; }
.bg-secondary{ background-color:var(--secondary)!important; }
.bg-success{ background-color:var(--success)!important; }
.bg-danger{ background-color: var(--danger)!important; }
.bg-warning{ background-color:var(--warning)!important; }
.bg-info{ background-color: var(--info)!important; }
.bg-light{ background-color: var(--light)!important; }
.bg-dark{ background-color: var(--dark)!important; }
.bg-white{ background-color: var(--white)!important; }
.bg-light-secondary{background-color: #F1F1F1!important;}
/* 新增 */
.bg-bg{ background-color: var(--backgroundcolor)!important; }
.bg-333{ background-color: #333333!important; }
.bg-555{ background-color: #555555!important; }
.bg-666{ background-color: #666666!important; }
.bg-999{ background-color :#999999!important; }
.bg-aaa{ background-color: #AAAAAA!important; }
.bg-bbb{ background-color: #BBBBBB!important; }
.bg-ccc{ background-color: #CCCCCC!important; }
.bg-ddd{ background-color: #DDDDDD!important; }
.bg-eee{ background-color: #EEEEEE!important; }
.bg-e4{ background-color: #E4E4E4!important; }
.bg-fff{ background-color: #FFFFFF!important; }
.bg-f8{ background-color: #f8f8f8!important; }
.bg-f7{ background-color: #f7f7f7!important; }
.bg-f5{ background-color: #f5f5f5!important; }
.bg-f2{ background-color: #f2f2f2!important; }
.bg-fa{ background-color: #fafafa!important; }
.bg-main{ background-color: var(--themescolor)!important; }
.bg-transparent{background: transparent!important;}

/* 透明度 */
.opacity-0{opacity:0}
.opacity-2{opacity:0.2}
.opacity-4{opacity:0.4}
.opacity-6{opacity:0.6}
.opacity-8{opacity:0.8}
.opacity-10{opacity:1}

/* Spacing */
.m-0 { margin-left: 0;margin-right: 0;margin-top: 0;margin-bottom: 0;}
.m { margin-left: 5rpx;margin-right: 5rpx;margin-top: 5rpx;margin-bottom: 5rpx;}
.m-1 { margin-left: 10rpx;margin-right: 10rpx;margin-top: 10rpx;margin-bottom: 10rpx;}
.m-2 { margin-left: 20rpx;margin-right: 20rpx;margin-top: 20rpx;margin-bottom: 20rpx;}
.m-3 { margin-left: 30rpx;margin-right: 30rpx;margin-top: 30rpx;margin-bottom: 30rpx;}
.m-4 { margin-left: 40rpx;margin-right: 40rpx;margin-top: 40rpx;margin-bottom: 40rpx;}
.m-5 { margin-left: 50rpx;margin-right: 50rpx;margin-top: 50rpx;margin-bottom: 50rpx;}
.m-6 { margin-left: 60rpx;margin-right: 60rpx;margin-top: 60rpx;margin-bottom: 60rpx;}
.m-8 { margin-left: 80rpx;margin-right: 80rpx;margin-top: 80rpx;margin-bottom: 80rpx;}
.m-10 { margin-left: 100rpx;margin-right: 100rpx;margin-top: 100rpx;margin-bottom: 100rpx;}
.m-12 { margin-left: 120rpx;margin-right: 120rpx;margin-top: 120rpx;margin-bottom: 120rpx;}
/* 新增 */
.m-auto { margin: auto;}
.m-0-auto { margin: 0 auto;}/* 水平居中 */

.mx-0 { margin-left: 0;margin-right: 0;}
.mx { margin-left: 5rpx;margin-right: 5rpx;}
.mx-1 { margin-left: 10rpx;margin-right: 10rpx;}
.mx-2 { margin-left: 20rpx;margin-right: 20rpx;}
.mx-15r { margin-left: 15rpx;margin-right: 15rpx;}
.mx-3 { margin-left: 30rpx;margin-right: 30rpx;}
.mx-4 { margin-left: 40rpx;margin-right: 40rpx;}
.mx-5 { margin-left: 50rpx;margin-right: 50rpx;}
.mx-6 { margin-left: 60rpx;margin-right: 60rpx;}
.mx-8 { margin-left: 80rpx;margin-right: 80rpx;}
.mx-10 { margin-left: 100rpx;margin-right: 100rpx;}
.mx-12 { margin-left: 120rpx;margin-right: 120rpx;}
.mx-20 { margin-left: 200rpx;margin-right: 200rpx;}

.my-0 { margin-top: 0;margin-bottom: 0;}
.my { margin-top: 5rpx;margin-bottom: 5rpx;}
.my-1 { margin-top: 10rpx;margin-bottom: 10rpx;}
.my-2 { margin-top: 20rpx;margin-bottom: 20rpx;}
.my-3 { margin-top: 30rpx;margin-bottom: 30rpx;}
.my-4 { margin-top: 40rpx;margin-bottom: 40rpx;}
.my-5 { margin-top: 50rpx;margin-bottom: 50rpx;}
.my-6 { margin-top: 60rpx;margin-bottom: 60rpx;}
.my-8 { margin-top: 80rpx;margin-bottom: 80rpx;}
.my-10 { margin-top: 100rpx;margin-bottom: 100rpx;}
.my-12 { margin-top: 120rpx;margin-bottom: 120rpx;}

.mt-0 { margin-top: 0;}
.mt { margin-top: 5rpx;}
.mt-auto { margin-top: auto;}
.mt-1 { margin-top: 10rpx;}
.mt-2 { margin-top: 20rpx;}
.mt-3 { margin-top: 30rpx;}
.mt-4 { margin-top: 40rpx;}
.mt-5 { margin-top: 50rpx;}
.mt-6 { margin-top: 60rpx;}
.mt-8 { margin-top: 80rpx;}
.mt-10 { margin-top: 100rpx;}
.mt-12 { margin-top: 120rpx;}
.mt-15 { margin-top: 150rpx;}

.mb-0 { margin-bottom: 0;}
.mb { margin-bottom: 5rpx;}
.mb-auto { margin-bottom: auto;}
.mb-1 { margin-bottom: 10rpx;}
.mb-2 { margin-bottom: 20rpx;}
.mb-3 { margin-bottom: 30rpx;}
.mb-4 { margin-bottom: 40rpx;}
.mb-5 { margin-bottom: 50rpx;}
.mb-6 { margin-bottom: 60rpx;}
.mb-8 { margin-bottom: 80rpx;}
.mb-88r { margin-bottom: 88rpx;}
.mb-10 { margin-bottom: 100rpx;}
.mb-12 { margin-bottom: 120rpx;}

.ml-0 { margin-left: 0;}
.ml { margin-left: 5rpx;}
.ml-auto { margin-left: auto;}
.ml-1 { margin-left: 10rpx;}
.ml-2 { margin-left: 20rpx;}
.ml-3 { margin-left: 30rpx;}
.ml-4 { margin-left: 40rpx;}
.ml-5 { margin-left: 50rpx;}
.ml-6 { margin-left: 60rpx;}
.ml-8 { margin-left: 80rpx;}
.ml-10 { margin-left: 100rpx;}
.ml-12 { margin-left: 120rpx;}

.mr-0 { margin-right: 0;}
.mr { margin-right: 5rpx;}
.mr-auto { margin-right: auto;}
.mr-1 { margin-right: 10rpx;}
.mr-15r { margin-right: 15rpx;}
.mr-2 { margin-right: 20rpx;}
.mr-3 { margin-right: 30rpx;}
.mr-4 { margin-right: 40rpx;}
.mr-5 { margin-right: 50rpx;}
.mr-6 { margin-right: 60rpx;}
.mr-8 { margin-right: 80rpx;}
.mr-10 { margin-right: 100rpx;}
.mr-12 { margin-right: 120rpx;}

.p-0 {padding-left: 0;padding-right: 0;padding-top: 0;padding-bottom: 0;}
.p {padding-left: 5rpx;padding-right: 5rpx;padding-top: 5rpx;padding-bottom:5rpx;}
.p-1 {padding-left: 10rpx;padding-right: 10rpx;padding-top: 10rpx;padding-bottom: 10rpx;}
.p-2 {padding-left: 20rpx;padding-right: 20rpx;padding-top: 20rpx;padding-bottom: 20rpx;}
.p-3 {padding-left: 30rpx;padding-right: 30rpx;padding-top: 30rpx;padding-bottom: 30rpx;}
.p-4 {padding-left: 40rpx;padding-right: 40rpx;padding-top: 40rpx;padding-bottom: 40rpx;}
.p-5 {padding-left: 50rpx;padding-right: 50rpx;padding-top: 50rpx;padding-bottom: 50rpx;}

.px-0 { padding-left: 0;padding-right: 0;}
.px { padding-left: 5rpx;padding-right: 5rpx;}
.px-1 { padding-left: 10rpx;padding-right: 10rpx;}
.px-15r { padding-left: 15rpx;padding-right: 15rpx;}
.px-2 { padding-left: 20rpx;padding-right: 20rpx;}
.px-3 { padding-left: 30rpx;padding-right: 30rpx;}
.px-4 { padding-left: 40rpx;padding-right: 40rpx;}
.px-5 { padding-left: 50rpx;padding-right: 50rpx;}
.px-6 { padding-left: 60rpx;padding-right: 60rpx;}
.px-7 { padding-left: 70rpx;padding-right: 70rpx;}
.px-8 { padding-left: 80rpx;padding-right: 80rpx;}
.px-9 { padding-left: 90rpx;padding-right: 90rpx;}
.px-10 { padding-left: 100rpx;padding-right: 100rpx;}
.px-12 { padding-left: 120rpx;padding-right: 120rpx;}

.py-0 { padding-top: 0;padding-bottom: 0;}
.py { padding-top: 5rpx;padding-bottom: 5rpx;}
.py-1 { padding-top: 10rpx;padding-bottom: 10rpx;}
.py-15r { padding-top: 15rpx;padding-bottom: 15rpx;}
.py-2 { padding-top: 20rpx;padding-bottom: 20rpx;}
.py-3 { padding-top: 30rpx;padding-bottom: 30rpx;}
.py-4 { padding-top: 40rpx;padding-bottom: 40rpx;}
.py-5 { padding-top: 50rpx;padding-bottom: 50rpx;}
.py-6 { padding-top: 60rpx;padding-bottom: 60rpx;}
.py-8 { padding-top: 80rpx;padding-bottom: 80rpx;}
.py-10 { padding-top: 100rpx;padding-bottom: 100rpx;}
.py-12 { padding-top: 120rpx;padding-bottom: 120rpx;}

.pt-0 { padding-top: 0;}
.pt { padding-top: 5rpx;}
.pt-1 { padding-top: 10rpx;}
.pt-15 { padding-top: 15rpx;}
.pt-2 { padding-top: 20rpx;}
.pt-3 { padding-top: 30rpx;}
.pt-4 { padding-top: 40rpx;}
.pt-5 { padding-top: 50rpx;}
.pt-6 { padding-top: 60rpx;}
.pt-8 { padding-top: 80rpx;}
.pt-10 { padding-top: 100rpx;}
.pt-12 { padding-top: 120rpx;}
.pt-20 { padding-top: 200rpx;}

.pb-0 { padding-bottom: 0;}
.pb { padding-bottom: 5rpx;}
.pb-1 { padding-bottom: 10rpx;}
.pb-2 { padding-bottom: 20rpx;}
.pb-3 { padding-bottom: 30rpx;}
.pb-4 { padding-bottom: 40rpx;}
.pb-5 { padding-bottom: 50rpx;}
.pb-6 { padding-bottom: 60rpx;}
.pb-8 { padding-bottom: 80rpx;}
.pb-88r { padding-bottom: 88rpx;}
.pb-10 { padding-bottom: 100rpx;}
.pb-12 { padding-bottom: 120rpx;}
.pb-20 { padding-bottom: 200rpx;}
.pb-24 { padding-bottom: 240rpx;}
.pb-100pre { padding-bottom: 100%;}/* 指定图片正方形用 */

.pl-0 { padding-left: 0;}
.pl { padding-left: 5rpx;}
.pl-1 { padding-left: 10rpx;}
.pl-2 { padding-left: 20rpx;}
.pl-3 { padding-left: 30rpx;}
.pl-4 { padding-left: 40rpx;}
.pl-5 { padding-left: 50rpx;}
.pl-6 { padding-left: 60rpx;}
.pl-7 { padding-left: 70rpx;}
.pl-8 { padding-left: 80rpx;}
.pl-9 { padding-left: 90rpx;}
.pl-10 { padding-left: 100rpx;}
.pl-12 { padding-left: 120rpx;}

.pr-0 { padding-right: 0;}
.pr { padding-right: 5rpx;}
.pr-1 { padding-right: 10rpx;}
.pr-2 { padding-right: 20rpx;}
.pr-3 { padding-right: 30rpx;}
.pr-4 { padding-right: 40rpx;}
.pr-5 { padding-right: 50rpx;}
.pr-6 { padding-right: 60rpx;}
.pr-8 { padding-right: 80rpx;}
.pr-10 { padding-right: 100rpx;}
.pr-12 { padding-right: 120rpx;}

/* 新增 */
.zindex-0 {z-index: 0!important;}
.zindex-1 {z-index: 1!important;}
.zindex-2 {z-index: 2!important;}
.zindex-99 {z-index: 99!important;}
.zindex-100 {z-index: 100!important;}
.zindex-109 {z-index: 109!important;}
.zindex-999 {z-index: 999!important;}
.zindex-9999 {z-index: 9999!important;}

/* 新增 */
.overflow-h{ overflow: hidden; }
.overflow-x{ overflow-x: auto; }
.overflow-x-h{ overflow-x: hidden; }
.overflow-x-scroll{ overflow-x: scroll; }
.overflow-y{ overflow-y: auto; }
.overflow-y-h{ overflow-y: hidden; }
.overflow-y-scroll{ overflow-y: scroll; }
.overflow-scroll {overflow: scroll; }
.overflow-auto {overflow: auto; }
.overflow-visible {overflow: visible; }

/* 防文字溢出*/
/* 注意：后面这个vertical-align: bottom，是在元素有border线时才能看得出效果(不加vertical-align，文字会居于盒子的中上方，并不是完全居中)*/
[class*='line-clamp']{ display: -webkit-inline-box; text-overflow:ellipsis; overflow: hidden;-webkit-box-orient: vertical; word-wrap:break-word!important; word-break:break-all!important; white-space: normal!important; vertical-align: bottom;}
.line-clamp1{ -webkit-line-clamp: 1; }/* 作用：限制只显示1行,超出部分以...显示，备注：同级元素有padding-bottom的话会显示多半行，这时要包多一层来解决*/
.line-clamp2{ -webkit-line-clamp: 2; }/* 作用：限制只显示2行,超出部分以...显示，备注：同级元素有padding-bottom的话会显示多半行，这时要包多一层来解决*/


/* 在父组件不是flex布局的情况下●子●元素水平居(屏幕)中--备注:父组件必须是class="position-relative"或者父组件是body*/
.center-x{ position: absolute; left: 50%; transform: translate(-50%,0);}
/* 在父组件不是flex布局的情况下●子●元素垂直居(屏幕)中--备注:父组件必须是class="position-relative"或者父组件是body*/
.center-y{ position: absolute; top: 50%; transform: translate(0,-50%);}
/* 在父组件不是flex布局的情况下●子●元素水平及垂直居(屏幕)中--备注:父组件必须是class="position-relative"或者父组件是body */
.center-xy{ position: absolute; left: 50%; top: 50%;transform: translate(-50%,-50%);}

/* 背景线性渐变 */
.l-gradient-l{ background-image: linear-gradient(to right, var(--themescolor), var(--gradientcolor));}/* 从左到右线性主题色渐变 */
.l-gradient-lt{ background-image: linear-gradient(to right bottom, var(--themescolor), var(--gradientcolor));}/* 从左上到右下线性主题色渐变 */
.l-gradient-lb{ background-image: linear-gradient(to right top, var(--themescolor), var(--gradientcolor));}/* 从左下到右上线性主题色渐变 */
.l-gradient-r{ background-image: linear-gradient(to left, var(--themescolor), var(--gradientcolor));}/* 从右到左线性主题色渐变 */
.l-gradient-rt{ background-image: linear-gradient(to left bottom, var(--themescolor), var(--gradientcolor));}/* 从右上到左下线性主题色渐变 */
.l-gradient-rb{ background-image: linear-gradient(to left top, var(--themescolor), var(--gradientcolor));}/* 从右下到左上线性主题色渐变 */
.l-gradient-t{ background-image: linear-gradient(to bottom, var(--themescolor), var(--gradientcolor));}/* 从上到下线性主题色渐变 */
.l-gradient-b{ background-image: linear-gradient(to top, var(--themescolor), var(--gradientcolor));}/* 从下到上线性主题色渐变 */

/* 字体线性渐变(只支持webkit) */
.l-gradient-text-l{ background: linear-gradient(to right, var(--themescolor), var(--gradientcolor));-webkit-background-clip: text; background-clip: text;color: transparent; }/* 字体从左到右线性主题色渐变 */
  
/* 背景径向渐变 */
.r-gradient-e-out{ background-image: Radial-gradient(ellipse,var(--themescolor), var(--gradientcolor));}/* 从中心向外发散椭圆形(默认值是ellipse椭圆形)径向主题色渐变 */
.r-gradient-e-in{ background-image: Radial-gradient(ellipse,var(--gradientcolor),var(--themescolor));}/* 从中心向内发散椭圆形(默认值是ellipse椭圆形)径向主题色渐变 */
.r-gradient-c-out{ background-image: Radial-gradient(circle,var(--themescolor), var(--gradientcolor));}/* 从中心向外发散圆心径向主题色渐变*/
.r-gradient-c-in{ background-image: Radial-gradient(circle, var(--gradientcolor),var(--themescolor));}/* 从中心向内发散圆心径向主题色渐变 */

/* 动画 */
.translate3d0{transform:translate3d(0,0,0)}/* position:fiexd;的防抖，或者IOS border-radius不生效时用 */
.translateX120{transition: all 1.5s;transform: translateX(120%);}
.translateX-120{transition: all 1.5s;transform: translateX(-120%);}
.translateX150{transition: all 1.5s;transform: translateX(150%);}
.translateX0{transition: all 1.5s;transform: translateX(0%);}
/* 命名规则：all02--02是时间0.2秒 */
.transition-all02{transition: all 0.2s}
.transition-all05{transition: all 0.5s}
.transition-all10{transition: all 1s}
.transition-all15{transition: all 1.5s}
/* 命名规则：in--缩小，out--放大，0910--09是指缩小(放大)的倍数10是指1.0秒 */
.zoom-out0002{animation: zoom-out0005 0.2s linear;}@keyframes zoom-out0005 {0%{  transform :scale(0);}100%{  transform :scale(1);}}/* 缩小从0放大到1，动画时间0.2秒 */
.zoom-out0005{animation: zoom-out0005 0.5s linear;}@keyframes zoom-out0005 {0%{  transform :scale(0);}100%{  transform :scale(1);}}/* 缩小从0放大到1，动画时间0.5秒 */
.zoom-out0010{animation: zoom-out0010 1s linear;}@keyframes zoom-out0010 {0%{  transform :scale(0);}100%{  transform :scale(1);}}/* 缩小从0放大到1，动画时间1秒 */
.zoom-out0910{animation: zoom-out0910 1s linear;}@keyframes zoom-out0910 {0%{  transform :scale(0.9);}100%{  transform :scale(1);}}/* 缩小从0.9放大到1，动画时间1秒 */
.zoom-in1110{animation: zoom-in1110 1s linear;}@keyframes zoom-in1110 {0%{  transform :scale(1.1);}100%{  transform :scale(1);}}/* 缩小从1.1缩小到1，动画时间1秒 */
.zoom-in-out0910{animation: zoom-in-out0910 1s linear;}@keyframes zoom-in-out0910 {0%{  transform :scale(1);}50%{  transform :scale(0.9);}100%{  transform :scale(1);}}/* 缩小0.9倍后再还原，动画时间1秒 */
.zoom-in-out1110{animation: zoom-in-out1110 1s linear;}@keyframes zoom-in-out1110 {0%{  transform :scale(1);}50%{  transform :scale(1.1);}100%{  transform :scale(1);}}/* 放大1.1倍后再还原，动画时间1秒 */
.zoom-in-out1105{animation: zoom-in-out1105 0.5s linear;}@keyframes zoom-in-out1105 {0%{  transform :scale(1);}50%{  transform :scale(1.1);}100%{  transform :scale(1);}}/* 放大1.1倍后再还原，动画时间0.5秒 */
.zoom-in-out1210{animation: zoom-in-out1210 1s linear;}@keyframes zoom-in-out1210 {0%{  transform :scale(1);}50%{  transform :scale(1.2);}100%{  transform :scale(1);}}/* 放大1.2倍后再还原，动画时间1秒 */
.zoom-in-out1215{animation: zoom-in-out1215 1.5s linear;}@keyframes zoom-in-out1215 {0%{  transform :scale(1);}50%{  transform :scale(1.2);}100%{  transform :scale(1);}}/* 放大1.2倍后再还原，动画时间1.5秒 */
.zoom-in-out1510{animation: zoom-in-out1510 1s linear;}@keyframes zoom-in-out1510 {0%{  transform :scale(1);}50%{  transform :scale(1.5);}100%{  transform :scale(1);}}/* 放大1.5倍后再还原，动画时间1秒 */
.zoom-in-out2010{animation: zoom-in-out2010 1s linear;}@keyframes zoom-in-out2010 {0%{  transform :scale(1);}50%{  transform :scale(2);}100%{  transform :scale(1);}}/* 放大2倍后再还原，动画时间1秒 */
.filter-blur1010{animation: filter-blur1010 5s linear;}@keyframes filter-blur1010 {0%{  filter :blur(10rpx);}50%{  filter :blur(5rpx);}100%{  filter :blur(0rpx);}}/* 滤镜-高斯模糊(10rpx)，动画时间1秒 */
		
/* 滤镜-高斯模糊 */
.filter-blur-0{filter :blur(0rpx)}					
.filter-blur-5{filter :blur(5rpx)}	
.filter-blur-10{filter :blur(10rpx)}	
.filter-opacity-0{filter :opacity(0)}					
.filter-opacity-05{filter :opacity(0.5)}					
.filter-opacity-10{filter :opacity(1)}	
.filter-grayscale-10{filter :grayscale(100%) }

/* 放大缩小 */
.scale-05{transform: scale(.5);}
.scale-06{transform: scale(.6);}
.scale-07{transform: scale(.7);}
.scale-08{transform: scale(.8);}
.scale-09{transform: scale(.9);}
.scale-10{transform: scale(1);}
.scale-12{transform: scale(1.2);}
.scale-13{transform: scale(1.3);}

/* 放大缩小后的位置 */
.origin-c-t{transform-origin: center top;}/*c:center, t:top, X轴居中,Y轴对齐顶部(顶部居中) */
.origin-c-b{transform-origin: center bottom;}/* 放大缩小后X轴居中,Y轴对齐底部(底部居中) */
.origin-l-t{transform-origin: left top;}/*  放大缩小后X轴居左,Y轴对齐顶部(左上角) */

/* 放大缩小(这个不会像scale占用空白空间，但不支持火狐浏览器) */
.zoom-05{zoom: 0.5;}
.zoom-06{zoom: 0.6;}
.zoom-07{zoom: 0.7;}
.zoom-08{zoom: 0.8;}
.zoom-09{zoom: 0.9;}
.zoom-10{zoom: 1;}
.zoom-12{zoom: 1.2;}

/* 辅助 */
[class*='mask-percent']{ position: fixed; width: 100%; height: 100%; left:0; background: rgba(0, 0, 0, 0.65); z-index: 999;}
.mask-percent-s { top:0;}/* popup等插件要用到的黑色透明容器(子元素能设定高度百分比,但只能放在HTML的最外层父级元素里),show时的状态(top: 0;)*/
.mask-percent-h { top:100%; }/* popup hidden时的状态(top: 100%;)*/
[class*='mask-wrapper']{ position: fixed; left:0; bottom: 0;  right: 0; background: rgba(0, 0, 0, 0.4); z-index: 999;}
.mask-wrapper-s {  top: 0; }/* popup等插件要用到的黑色透明容器(子元素不能设定高度百分比,只能用rem或rpx来定义子元素的高度,但可以放在HTML任意层级元素里),show时的状态(top: 0;) */
.mask-wrapper-h { top: 100%; }/* popup hidden时的状态(top: 100%;)*/
.bg-cover { background-size: cover; background-repeat: no-repeat; background-position: center center;}/* 背景图自适应(拉伸-图像完全覆盖背景区域) */
.bg-cover-all { background-size: 100% 100%; background-repeat: no-repeat; background-position: center center; }/* 背景图自适应(平铺) */

/* <!-- 蚂蚁线 --> */
.ants{ width:100%; border-bottom: 10rpx solid transparent;
	/* // 备注:下面的红色如果填25%,蓝色填50%,则填满(没有空白地方)(设中间空白处线宽为8，则25-8=17%，50-8=42%) */
	background: linear-gradient(white,white) padding-box,repeating-linear-gradient(-45deg, #EC6D6D 0, #EC6D6D 17%, transparent 0, transparent 25%, #8BB5E8 0, #8BB5E8 42%, transparent 0, transparent 50%) 0/128rpx 128rpx; 
	animation:antsline 24s linear infinite;
}@keyframes antsline{100%{background-position:100%;}}
/* <!-- 蚂蚁线 --> */

/* start-动画效果 */
[class*='animate_']{ animation-duration: 0.5s;animation-fill-mode: both; }
/* 放大 */.animate_zoomIn { animation-name: zoomIn; } @keyframes zoomIn { from { opacity: 0; transform: scale3d(0.3, 0.3, 0.3); } 50% { opacity: 1; } }
/* 弹跳 */.animate_bounce { animation-name: bounce; transform-origin: center bottom; } 
					@keyframes bounce { from, 20%, 53%, to { animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);transform: translate3d(0, 0, 0); } 40%, 
					43% { animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); transform: translate3d(0, -30px, 0) scaleY(1.1); } 
					70% { animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); transform: translate3d(0, -15px, 0) scaleY(1.05); } 
					80% { transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); transform: translate3d(0, 0, 0) scaleY(0.95); } 
					90% { transform: translate3d(0, -4px, 0) scaleY(1.02); } } 
/* 橡皮 */.animate_rubberBand { animation-name: rubberBand; } 
					@keyframes rubberBand { from { transform: scale3d(1, 1, 1); } 30% { transform: scale3d(1.25, 0.75, 1); } 
					40% { transform: scale3d(0.75, 1.25, 1); } 50% { transform: scale3d(1.15, 0.85, 1); } 65% { transform: scale3d(0.95, 1.05, 1); } 
					75% { transform: scale3d(1.05, 0.95, 1); } to { transform: scale3d(1, 1, 1); } }
/* 回弹 */.animate_bounceIn { animation-name: bounceIn; } 
					@keyframes bounceIn { from, 20%, 40%, 60%, 80%, to { animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 
					0% { opacity: 0; transform: scale3d(0.3, 0.3, 0.3); } 20% { transform: scale3d(1.1, 1.1, 1.1); } 40% { transform: scale3d(0.9, 0.9, 0.9); } 
					60% { opacity: 1; transform: scale3d(1.03, 1.03, 1.03); } 80% { transform: scale3d(0.97, 0.97, 0.97); } to { opacity: 1; transform: scale3d(1, 1, 1); } }
/* 翻转 */.animate_flipInHor { animation: flip-in-hor-bottom 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; } 
					@keyframes flip-in-hor-bottom { 0% { transform: rotateX(80deg); opacity: 0; } 100% { transform: rotateX(0); opacity: 1; } }
/* 旋转 */.animate_rotateIn { animation: rotate-in-center 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; }
					@keyframes rotate-in-center { 0% { transform: rotate(-360deg); opacity: 0; } 100% { transform: rotate(0); opacity: 1; } }
/* end-动画效果 */